<template>
  <div class="mainDiv">
    <div class="top">
      <p class="advisorScore">我的借阅记录</p>
      <!--          :data="tableData"-->
      <el-table
          :data="tableData"
          style="width: 60vw"
      >
        <el-table-column prop="bookName" label="书名"></el-table-column>
        <el-table-column prop="borrowTime" label="借阅时间" :formatter="formatReturnTime"></el-table-column>
        <el-table-column prop="returnTime" label="归还时间" :formatter="formatReturnTime"></el-table-column>
        <el-table-column prop="renewTimes" label="续借次数"></el-table-column>
        <el-table-column label="续借">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" v-if="scope.row.returnTime===null" @click="renew(scope.row.bookId)">续借
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>


<script>
import {getLogs} from '@/api/getLog';

export default {
  name: "Log",
  data() {
    return {
      tableData: [
        {
          "bookId": 1,
          "bookName": "a",
          "borrowTime": "b",
          "returnTime": null,
          "renewTimes": 1
        },
        {
          "bookId": 2,
          "bookName": "c",
          "borrowTime": "d",
          "returnTime": "2020-11-27 14:44:21",
          "renewTimes": 0
        }
      ]
    }
  },

  methods: {
    formatReturnTime: function (row, column, cellValue) {
      if (cellValue === null) {
        return '未归还';
      } else {
        return cellValue.replace("T", " ");
      }
    },
    renew(id) {
      console.log(id);
    },
    getMyLog: async function () {
      let log_src = await getLogs();
      console.log(log_src);
      this.tableData = log_src.data;
    }
  },
  created() {
    this.getMyLog();
  }

};
</script>


<style scoped>
.mainDiv {
  margin-left: 13%;
}

.advisorScore {
  font-size: 30px;
  font-weight: 800;
  margin-left: 50%;
  margin-bottom: 25px;
  transform: translateX(-37%);
}

</style>